<template>
  <div class="app-container" v-loading="loading">
    <el-descriptions :column="2" title="企业信息">
      <el-descriptions-item :span="3" label="营业执照">
        <ImageUpload :disabled="true" :limit="1" :isShowTip="false" v-model="form.businessLicensePath"></ImageUpload>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="企业名称">
        {{form.companyName}}
      </el-descriptions-item>

      <el-descriptions-item label="统一社会信用代码">
        {{form.creditCode}}
      </el-descriptions-item>
      <el-descriptions-item label="营业执照有效期">
        {{form.licenseValidFrom}} - {{form.licenseValidTo}}
      </el-descriptions-item>

      <el-descriptions-item :span="2" label="经营地址">
        {{form.operateAddress}}
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="业务简介">
        {{form.companyProfile}}
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="公司内部照">
        <ImageUpload :limit="5" :disabled="true" :isShowTip="false" v-model="form.storefrontPhotoPath"></ImageUpload>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="2" title="负责人">
      <el-descriptions-item label="负责人姓名">
        {{form.administratorName}}
      </el-descriptions-item>
      <el-descriptions-item label="负责人手机号">
        {{form.administratorPhone}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="2" title="增值税发票">
      <el-descriptions-item label="增值税发票">
        <div v-for="item in invoiceTypeList" :key="item.invoiceTypeId" v-if="settlement.invoiceTypeId === item.invoiceTypeId">
          {{item.invoiceTypeName}}
        </div>
      </el-descriptions-item>
    </el-descriptions>

<!--    <el-descriptions :column="2" title="费率">-->
<!--      <el-descriptions-item label="常规费率">-->
<!--        <div v-for="item in invoiceTypeList" :key="item.invoiceTypeId" v-if="settlement.invoiceTypeId === item.invoiceTypeId">-->
<!--          {{ settlement.conventionRate }}%-->
<!--        </div>-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item label="特殊费率">-->
<!--        {{ settlement.specialRate }}%-->
<!--      </el-descriptions-item>-->
<!--    </el-descriptions>-->


    <el-descriptions :column="2" title="创客限额">
      <el-descriptions-item label="创客每月限额">
        <el-popover placement="top-start" title="" width="200" trigger="hover" content="为0不限制">
          <span slot="reference">{{settlement.monthlyLimit}}元</span>
        </el-popover>

      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="2" title="申请信息" v-if="organizations.auditStatus !== null">
      <el-descriptions-item :span="2" label="申请状态">
        <el-tag type="info" v-if="organizations.auditStatus === 0">审批中</el-tag>
        <el-tag v-else-if="organizations.auditStatus === 1">审批通过</el-tag>
        <el-tag type="warning" v-else-if="organizations.auditStatus === 4">待税地审核</el-tag>
        <el-tag type="danger" v-else-if="organizations.auditStatus === 2">驳回</el-tag>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="申请人">
        {{ organizations.createBy }}
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="审批人">
        {{ organizations.updateBy }}
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="备注">
        {{ organizations.remarks }}
      </el-descriptions-item>
      <el-descriptions-item :span="2" v-if="organizations.auditStatus === 2" label="驳回原因">
        {{ organizations.reason }}
      </el-descriptions-item>
    </el-descriptions>

    <template v-if="organizations.auditStatus === null || organizations.auditStatus === 2 ">
      <div class="dialog-footer" v-if="organizationType === 2 || organizationType === 4">
        <el-button type="primary" @click="open = true">申请合作</el-button>
        <el-button @click="handleCancel(false)">取 消</el-button>
      </div>
    </template>


    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="申请合作" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :disabled="formLoading" :model="auditForm" label-width="80px">
        <el-form-item label="税源名称" prop="companyName" >
          {{form.companyName}}
        </el-form-item>
        <el-form-item label="申请原因" prop="remarks">
          <el-input v-model="auditForm.remarks" :autosize="{ minRows: 8, maxRows: 8}" type="textarea" placeholder="请输入申请原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" v-if="organizationType === 2 || organizationType === 4" class="dialog-footer">
        <el-button type="primary" :loading="formLoading" @click="submitForm">申 请</el-button>
        <el-button @click="open = false" :loading="formLoading">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import store from "@/store";
import {listInvoiceType} from "@/api/system/InvoiceType";
import {addTax, getSettlementQuery, getTaxTerritory} from "@/api/tax/taxMarket";

export default {
  name: "taxDetail",
  props:{
    organization:{
      type:Object,
    },
  },
  data() {
    return{
      open:false,
      loading:false,
      formLoading:false,
      form:{

      },
      settlement:{

      },
      auditForm:{
        remarks:null,
        acceptOrganizationId:null,
      },
      organizations:{},
      invoiceTypeList:[],
      organizationType: store.getters.organizationType,
    }
  },
  mounted() {
    listInvoiceType().then(res=>{
      this.invoiceTypeList = res.rows
    })
  },
  methods:{
    getDetail(organizationId){
      this.loading = true
      getTaxTerritory(organizationId).then(res=>{
        this.loading = false
        this.form = res.data
      }).catch(()=>{
        this.loading = false
      })
      getSettlementQuery(organizationId).then(res=>{
        this.loading = false
        this.settlement = res.data
      }).catch(()=>{
        this.loading = false
      })
    },

    submitForm(){
      addTax(this.auditForm).then(res=>{
        if (res.code === 200){
          this.handleCancel(true)
        }
      })
    },

    handleCancel(val){
      this.$emit("cancel",val)
    },
  },
  watch:{
    organization:{
      handler(val){
        if (val){
          this.organizations = val
          // console.log(val)
          this.auditForm.acceptOrganizationId = val.organizationId
          this.getDetail(val.organizationId)
        }
      },
      immediate:true
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-descriptions{
  margin-top: 20px;
  .el-descriptions__header{
    margin-bottom: 10px;
  }
}
</style>
